Ext.onReady(function(){
	
//	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	var menuData = {};
	menuData.data = [{
			text: 'Home',
			leaf: true
		}, {
			text: 'Projects',
			url: 'project.do?action=init',
			leaf: true
		}, {
			text: 'Security',
			children: [{
				text: 'Users',
				url: 'user.do?action=init',
				leaf: true
				}
			]
		}
	];
	
	var MenuPanel = function(){
		MenuPanel.superclass.constructor.call(this, {
			id: 'menu-panel',
	        region:'west',
	        split:true,
	        collapsible: true,
	        title: ' ',
	        width: 280,
	        minSize: 175,
	        maxSize: 500,
	        margins:'0 0 5 5',
	        cmargins:'0 0 0 0',
	        rootVisible:false,
	        lines:true,
	        loader: new Ext.tree.TreeLoader({
				preloadChildren: true,
				clearOnLoad: false
			}),
	        root: new Ext.tree.AsyncTreeNode({
	        	id: 'root',
				text: 'Root',
				leaf: false,
				children: menuData.data
	        }),
	        listeners: {
	        	'click': function(node, e){
		        	if(node.isLeaf()){
					    e.stopEvent();
	//				    mainPanel.loadClass(node.attributes.href, node.id);
//					    Ext.Msg.alert(node.text, node.attributes.url);
//					    mainPanel.load({url: node.attributes.url});
					    mainPanel.loadPage(node.attributes.url, node.id, node.text);
		        		
					 }
	    		}
	        }
	    });
    };
    Ext.extend(MenuPanel, Ext.tree.TreePanel, {
    	
    });
	var menuPanel = new MenuPanel();
	
	var MainPanel = function(){
		this.searchStore = new Ext.data.Store({
			
		});
		MainPanel.superclass.constructor.call(this, {
	        id:'main-tabs',
	        region:'center',
	        margins:'0 5 5 0',
	        resizeTabs:true,
	        tabWidth:150,
	        minTabWidth: 120,
	        enableTabScroll: true,
	        activeTab:0,
	        items: {
	        	id: 'welcome-panel',
	        	title: 'Welcome - Home',
	        	tbar: [
	        		'Search: ', ' ',
	        		new Ext.form.Field({
		                width:240,
						store: this.searchStore
		            })
	        	]
	        }
	    });
    };
    Ext.extend(MainPanel, Ext.TabPanel, {
    	loadPage: function(url, id, title) {
	        var tab = this.getComponent(id);
	        if(tab){
	            this.setActiveTab(tab);
	        }else{
//	            var autoLoad = {url: url};
	            var p = this.add(new Ext.Panel({
	                id: id,
	                title: title,
//	                autoLoad: autoLoad
	                closable: true,
	                html: '<iframe src="' + url + '" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
	            }));
	            this.setActiveTab(p);
	        }
    	}
    });
	var mainPanel = new MainPanel();
	
	var headerPanel = new Ext.Panel({
        border: false,
        layout:'anchor',
        region:'north',
        height:60,
        items: [{
            xtype:'box',
            el:'header',
            border:false,
            anchor: 'none -25'
        },
        new Ext.Toolbar({
            items:[{
            	xtype: 'button',
            	text: 'Hello, ' + USER
            }, ' ', '->', 
			new Ext.form.TextField({
				width: 150,
				emptyText:'Search..'
			}), new Ext.Button({
				text: 'Go'
			}),
			' ', ' '
			]
        })]
    })
	var viewport = new Ext.Viewport({
		layout:'border',
        items:[headerPanel, menuPanel, mainPanel]
	});
	
	menuPanel.expandAll();
});